import { Input, Radio } from 'antd'
import { IsEnableMapping, AddedTypeMapping, SetfieldsMapType } from '../Config/theme'

import { menuStore } from '../Config/zustand'

const MenuConfigTopOptions = () => {
    const { topOptions, updateTopOptions } = menuStore()

    const configCheng = (field, value) => {
        topOptions[field] = value
        updateTopOptions(topOptions)
    }

    return (
        <div className='MenuConfigitem MenuConfigTopOptions'>
            <div className='Content'>
                <div>
                    <div className='Title'>刷新</div>
                    <div className='Label' >
                        <div>是否启用</div>
                        <Radio.Group buttonStyle="solid" value={topOptions.refreshStatus} onChange={e => configCheng('refreshStatus', e.target.value)}>
                            {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                        </Radio.Group>
                    </div>
                    <div className='Title'>查询</div>
                    <div className='Label' >
                        <div>是否启用</div>
                        <Radio.Group buttonStyle="solid" value={topOptions.queryStatus} onChange={e => configCheng('queryStatus', e.target.value)}>
                            {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                        </Radio.Group>
                    </div>
                    <div className='Title'>排序</div>
                    <div className='Label' >
                        <div>是否启用</div>
                        <Radio.Group buttonStyle="solid" value={topOptions.sortStatus} onChange={e => configCheng('sortStatus', e.target.value)}>
                            {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                        </Radio.Group>
                    </div>

                    <div className='Title'>新增</div>
                    <div className='Label' >
                        <div>是否启用</div>
                        <Radio.Group buttonStyle="solid" value={topOptions.addedStatus} onChange={e => configCheng('addedStatus', e.target.value)}>
                            {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                        </Radio.Group>
                    </div>
                    {topOptions.addedStatus &&
                        <>
                            <div className='Label' >
                                <div>新增类型</div>
                                <Radio.Group buttonStyle="solid" value={topOptions.addedType} onChange={e => configCheng('addedType', e.target.value)}>
                                    {AddedTypeMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                                </Radio.Group>
                            </div>
                            <div className='Label' >
                                <div>{topOptions.addedType === 'table' ? '列表路径' : '保存接口'} </div>
                                <Input value={topOptions.addedUrl} onChange={e => configCheng('addedUrl', e.target.value)} />
                            </div>
                            <div className='Label' >
                                <div>额外参数</div>
                                <Input value={topOptions.addedParams} onChange={e => configCheng('addedParams', e.target.value)} />
                            </div>
                            {topOptions.addedType === 'excel' &&
                                <>
                                    <div className='Label' >
                                        <div>获取Excel</div>
                                        <Input value={topOptions.addedExcel} onChange={e => configCheng('addedExcel', e.target.value)} />
                                    </div>
                                </>
                            }
                        </>
                    }
                    <div className='Title'>导出</div>
                    <div className='Label' >
                        <div>是否启用</div>
                        <Radio.Group buttonStyle="solid" value={topOptions.exportStatus} onChange={e => configCheng('exportStatus', e.target.value)}>
                            {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                        </Radio.Group>
                    </div>
                    {topOptions.exportStatus &&
                        <>
                            <div className='Label' >
                                <div>操作名称</div>
                                <Input value={topOptions.exportName} onChange={e => configCheng('exportName', e.target.value)} />
                            </div>
                            <div className='Label' >
                                <div>导出接口</div>
                                <Input value={topOptions.exportUrl} onChange={e => configCheng('exportUrl', e.target.value)} />
                            </div>
                            <div className='Label' >
                                <div>导出参数</div>
                                <Input value={topOptions.exportParams} onChange={e => configCheng('exportParams', e.target.value)} />
                            </div>
                        </>
                    }
                </div>
                <div>
                    <div className='Title'>批量删除</div>
                    <div className='Label' >
                        <div>是否启用</div>
                        <Radio.Group buttonStyle="solid" value={topOptions.batchDeletionStatus} onChange={e => configCheng('batchDeletionStatus', e.target.value)}>
                            {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                        </Radio.Group>
                    </div>
                    {topOptions.batchDeletionStatus &&
                        <>
                            <div className='Label' >
                                <div>删除接口</div>
                                <Input value={topOptions.batchDeletionUrl} onChange={e => configCheng('batchDeletionUrl', e.target.value)} />
                            </div>
                            <div className='Label' >
                                <div>删除参数</div>
                                <Input value={topOptions.batchDeletionParams} onChange={e => configCheng('batchDeletionParams', e.target.value)} />
                            </div>
                        </>
                    }
                    <div className='Title'>批量状态</div>
                    <div className='Label' >
                        <div>是否启用</div>
                        <Radio.Group buttonStyle="solid" value={topOptions.batchActivationStatus} onChange={e => configCheng('batchActivationStatus', e.target.value)}>
                            {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                        </Radio.Group>
                    </div>
                    {topOptions.batchActivationStatus &&
                        <>
                            <div className='Label' >
                                <div>修改接口</div>
                                <Input value={topOptions.batchActivationUrl} onChange={e => configCheng('batchActivationUrl', e.target.value)} />
                            </div>
                            <div className='Label' >
                                <div>状态字段</div>
                                <Input value={topOptions.batchActivationParams} onChange={e => configCheng('batchActivationParams', e.target.value)} />
                            </div>
                            <div className='Label' >
                                <div>操作名称</div>
                                <Input value={topOptions.batchActivationOptName} onChange={e => configCheng('batchActivationOptName', e.target.value)} />
                            </div>
                            <div className='Label' >
                                <div>操作类型</div>
                                <Radio.Group buttonStyle="solid" value={topOptions.batchActivationMapType} onChange={e => configCheng('batchActivationMapType', e.target.value)}>
                                    {SetfieldsMapType.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                                </Radio.Group>
                            </div>
                            <div className='Label' >
                                <div>操作映射</div>
                                <Input value={topOptions.batchActivationBtnMap} onChange={e => configCheng('batchActivationBtnMap', e.target.value)} />
                            </div>
                        </>
                    }
                    <div className='Title'>批量审核</div>
                    <div className='Label' >
                        <div>是否启用</div>
                        <Radio.Group buttonStyle="solid" value={topOptions.batchReviewStatus} onChange={e => configCheng('batchReviewStatus', e.target.value)}>
                            {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                        </Radio.Group>
                    </div>
                    {topOptions.batchReviewStatus &&
                        <>
                            <div className='Label' >
                                <div>操作名称</div>
                                <Input value={topOptions.batchReviewName} onChange={e => configCheng('batchReviewName', e.target.value)} />
                            </div>
                            <div className='Label' >
                                <div>审核接口</div>
                                <Input value={topOptions.batchReviewUrl} onChange={e => configCheng('batchReviewUrl', e.target.value)} />
                            </div>
                            <div className='Label' >
                                <div>审核模板</div>
                                <Input value={topOptions.batchReviewTemp} onChange={e => configCheng('batchReviewTemp', e.target.value)} />
                            </div>
                            <div className='Label' >
                                <div>映射字段</div>
                                <Input value={topOptions.batchReviewParams} onChange={e => configCheng('batchReviewParams', e.target.value)} />
                            </div>
                        </>
                    }
                </div>
                <div>
                    <div className='Title'>OLAP设置</div>
                    <div className='Label' >
                        <div>保存布局</div>
                        <Radio.Group buttonStyle="solid" value={topOptions.olapLayout} onChange={e => configCheng('olapLayout', e.target.value)}>
                            {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                        </Radio.Group>
                    </div>
                    <div className='Label' >
                        <div>重置布局</div>
                        <Radio.Group buttonStyle="solid" value={topOptions.resetLayout} onChange={e => configCheng('resetLayout', e.target.value)}>
                            {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                        </Radio.Group>
                    </div>
                    <div className='Label' >
                        <div>统计图表</div>
                        <Radio.Group buttonStyle="solid" value={topOptions.charts} onChange={e => configCheng('charts', e.target.value)}>
                            {IsEnableMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                        </Radio.Group>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default MenuConfigTopOptions;